/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { useContext } from 'react';
import type { InputProps, SelectProps, RadioGroupProps } from 'antd';
import { Form, Input, Select, Tooltip, DatePicker, Radio } from 'antd';
import classnames from 'classnames';
import Context from '@/context';
import { SearchOutlined } from '@ant-design/icons';
import type { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker';
import type { ISlotItemProps } from '.';
import './headerForm.scss';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { Option } = Select;

// 内置任务名称搜索
export const InputItem = ({
	formItemProps = {},
	slotProps = {},
}: Partial<ISlotItemProps<string, InputProps>>) => {
	const { style: inputStyle, ...restInputProps } = slotProps;

	return (
		<FormItem<string> name="name" {...formItemProps}>
			<Input
				addonAfter={null}
				placeholder="按任务名称搜索"
				style={{ width: 210, ...inputStyle }}
				suffix={<SearchOutlined style={{ cursor: 'pointer' }} />}
				{...restInputProps}
			/>
		</FormItem>
	);
};

export type SearchType = 'fuzzy' | 'precise' | 'front' | 'tail';

const SEARCH_TYPE = [
	{
		key: 'caseSensitive',
		imgSrc: '',
		tip: '区分大小写匹配',
	},
	{
		key: 'precise',
		imgSrc: '',
		tip: '精确匹配',
	},
	{
		key: 'front',
		imgSrc: '',
		tip: '头部匹配',
	},
	{
		key: 'tail',
		imgSrc: '',
		tip: '尾部匹配',
	},
];

const CheckList = ({
	options,
	value,
	onChange,
}: {
	options: SearchType[];
	value?: SearchType;
	onChange?: (value: SearchType) => void;
}) => {
	const handleClick = (item: typeof SEARCH_TYPE[number]) => {
		const nextValue = value === item.key ? 'fuzzy' : (item.key as SearchType);
		onChange?.(nextValue);
	};

	return (
		<div style={{ display: 'flex' }}>
			{options.map((option) => {
				const item = SEARCH_TYPE.find((type) => type.key === option);
				if (!item) return null;
				return (
					<Tooltip key={item.key} title={item.tip} mouseEnterDelay={0.5}>
						<div
							className={classnames('suffix-item', value === item.key && 'actived')}
							style={{
								backgroundImage: `url(${item.imgSrc})`,
							}}
							onClick={() => handleClick(item)}
						/>
					</Tooltip>
				);
			})}
		</div>
	);
};

export const InputWithConditionItem = ({
	formItemProps = {},
	slotProps = {},
	restProps = {},
}: Partial<
	ISlotItemProps<
		string,
		InputProps,
		{
			filterOptions?: SearchType[];
			onSuffixClick?: (value: SearchType) => void;
		}
	>
>) => {
	const { filterOptions = ['precise', 'front', 'tail'], onSuffixClick } = restProps;

	return (
		<FormItem<string> name="multipleName" {...formItemProps}>
			<Input
				placeholder="按任务名称搜索"
				className="dt-multiple"
				suffix={
					<Form.Item<string> name="multipleNameSuffix" initialValue="fuzzy" noStyle>
						<CheckList options={filterOptions} onChange={onSuffixClick} />
					</Form.Item>
				}
				{...slotProps}
			/>
		</FormItem>
	);
};

export const OwnerItem = ({
	formItemProps = {},
	slotProps = {},
}: Partial<ISlotItemProps<number, SelectProps<number>>>) => {
	const { personList } = useContext(Context);
	const { style: selectStyle, ...restSelectProps } = slotProps;

	return (
		<FormItem<number> label="操作人" name="owner" {...formItemProps}>
			<Select
				allowClear
				showSearch
				size="middle"
				className="dt-form-shadow-bg"
				style={{ width: 200, ...selectStyle }}
				placeholder="请选择操作人"
				optionFilterProp="userName"
				{...restSelectProps}
			>
				{personList.map((item) => (
					<Option key={item.id} value={item.id}>
						{item.userName}
					</Option>
				))}
			</Select>
		</FormItem>
	);
};

export const RangeItem = ({
	formItemProps = {},
	slotProps = {},
}: Partial<ISlotItemProps<number, RangePickerProps>>) => {
	return (
		<FormItem name="rangeDate" label="日期范围选择" {...formItemProps}>
			<RangePicker {...slotProps} />
		</FormItem>
	);
};

export const DatePickerItem = ({
	formItemProps = {},
	slotProps = {},
}: Partial<ISlotItemProps<number, DatePickerProps>>) => {
	return (
		<FormItem name="date" label="业务日期" {...formItemProps}>
			<DatePicker
				format="YYYY-MM-DD"
				placeholder="业务日期"
				style={{ width: 210 }}
				{...slotProps}
			/>
		</FormItem>
	);
};

export const SelectItem = ({
	formItemProps = {},
	slotProps = {},
}: Partial<ISlotItemProps<number, SelectProps<string>>>) => {
	const { style, ...restSelectProps } = slotProps;
	return (
		<FormItem name="select" {...formItemProps}>
			<Select style={{ width: 150, ...style }} options={[]} {...restSelectProps} />
		</FormItem>
	);
};

export const RadioItem = ({
	formItemProps = {},
	slotProps = {},
}: Partial<ISlotItemProps<number, RadioGroupProps>>) => {
	return (
		<FormItem name="radioGroup" {...formItemProps}>
			<Radio.Group optionType="button" {...slotProps} />
		</FormItem>
	);
};
